<template>
	<view class="">
		<u-navbar :is-back="false" :is-fixed="false" :border-bottom="false" :background="{ background: '#CC0001' }">

		</u-navbar>
		<view class="text-center">
			<view class="bjys bg-orange"></view>
			<view class="avatar flex justify-center" @click="routes('/pages/my/mydata')">
				<view class="">
					<image src="../../static/images/avatar.png" mode="aspectFill"></image>
					<image class="alter" src="../../static/images/alter.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="u-font-34 text-bold">
				董庄
			</view>
			<view v-if="0">
				<button class="cu-btn round sm"
					style="margin-top: 10rpx;border-radius: 50rpx;background-color: #FFFFFF;"
					@click="multiauthRedirect('/pages/index/login')"> 登录 </button>
			</view>
		</view>

		<view class="order-content">
			<view class="my-top margin">
				<view class="head">
					<view class="">我的订单</view>
					<view class="u-font-24" @click="routes('/pages/orederList/orederList')">
						查看全部<text class="cuIcon-right"></text>
					</view>
				</view>
				<view class="orderNavigation flex flex-wrap">
					<view class="orderNavigation-dox widthsfzy" @click="routes('/pages/orederList/orederList')">
						<u-badge bgColor="#CC0001" size="mini" v-if="order_pay_num>0" :count="order_pay_num" :offset="[-18, 40]"></u-badge>
						<image src="../../static/images/myicon1.png" mode="scaleToFill"></image>
						<view>待付款</view>
					</view>
					<view class="orderNavigation-dox widthsfzy" @click="routes('/pages/orederList/orederList')">
						<u-badge bgColor="#CC0001" size="mini" v-if="order_pay_num>0" :count="order_pay_num" :offset="[-18, 40]"></u-badge>
						<image src="../../static/images/myicon2.png" mode="scaleToFill"></image>
						<view>待发货</view>
					</view>
					<view class="orderNavigation-dox widthsfzy" @click="routes('/pages/orederList/orederList')">
						<u-badge bgColor="#CC0001" size="mini" v-if="order_pay_num>0" :count="order_pay_num" :offset="[-18, 40]"></u-badge>
						<image src="../../static/images/myicon3.png" mode="scaleToFill"></image>
						<view>待收货</view>
					</view>
					<view class="orderNavigation-dox widthsfzy" @click="routes('/pages/orederList/orederList')">
						<u-badge bgColor="#CC0001" size="mini" v-if="order_pay_num>0" :count="order_pay_num" :offset="[-18, 40]"></u-badge>
						<image src="../../static/images/myicon4.png" mode="scaleToFill"></image>
						<view>已完成</view>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-form">
			<view class="cu-form-group" @click="routes('/pages/my/my_curriculum')">
				<view class="u-flex">
					<image src="../../static/images/my-icon1.png" mode="aspectFill"></image>
					<view class="title">我的课程</view>
				</view>
				<view class="cuIcon-right"></view>
			</view>
			<view class="cu-form-group" @click="routes('/pages/my/mycollect')">
				<view class="u-flex">
					<image src="../../static/images/my-icon2.png" mode="aspectFill"></image>
					<view class="title">我的收藏</view>
				</view>
				<view class="cuIcon-right"></view>
			</view>
			<view class="cu-form-group" @click="routes('/pages/activity/activity&switch')">
				<view class="u-flex">
					<image src="../../static/images/my-icon3.png" mode="aspectFill"></image>
					<view class="title">报名活动</view>
				</view>
				<view class="cuIcon-right"></view>
			</view>
			<view class="cu-form-group" @click="routes('/pages/my/join_in')">
				<view class="u-flex">
					<image src="../../static/images/my-icon4.png" mode="aspectFill"></image>
					<view class="title">立即加盟</view>
				</view>
				<view class="cuIcon-right"></view>
			</view>
			<view class="cu-form-group" @click="routes('/pages/my/download')">
				<view class="u-flex">
					<image src="../../static/images/my-icon5.png" mode="aspectFill"></image>
					<view class="title">下载</view>
				</view>
				<view class="cuIcon-right"></view>
			</view>
			<button class="cu-form-group" style="color: #333333;" open-type="contact">
				<view class="u-flex">
					<image src="../../static/images/my-icon6.png" mode="aspectFill"></image>
					<view class="title">联系客服</view>
				</view>
				<view class="cuIcon-right u-font-28"></view>
			</button>
		</view>
		<u-gap height="50"></u-gap>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_pay_num:1
			}
		},
		methods: {
			routes(url) {
				if(url && url.length>0){
					console.log('+++++',url.indexOf('http'))
				    if(url.indexOf('http')===0){
						// #ifdef H5 
							location.href=url
						// #endif
						// #ifdef MP-WEIXIN
							 uni.navigateTo({ 
								 url:'/pages/web/web?url='+encodeURIComponent(url)
							 })
						// #endif
						// #ifdef APP-PLUS
						plus.runtime.openURL(url, function(res) {  
							console.log(res);  
						});
						// #endif
					}else if(url.indexOf('&switch')>-1){
						url =url.substring(0,url.indexOf('&switch'))
						console.log(3434,url)
				        uni.switchTab({
							url:url
						})
				    }else {
				        console.log("挑起",url)
				        uni.navigateTo({url})
				    }
				}
			}
		}
	}
</script>

<style lang="scss">
	.text-center {
		color: #FFFFFF;

		.bjys {
			width: 100%;
			height: 360rpx;
			position: absolute;
			z-index: -1;
		}

		.avatar {
			padding: 10rpx 0;

			image {
				width: 86rpx;
				height: 86rpx;
				border-radius: 50%;
			}

			>view {
				position: relative;
				.alter {
					width: 24rpx;
					position: absolute;
					height: 24rpx;
					border-radius: 50%;
					bottom: 5%;
					z-index: 1;
					right: 0%;
				}
			}
		}

		.text-bold {
			margin-bottom: 10rpx;
		}

		.u-font-26+.u-font-26 {
			margin-left: 40rpx;
		}
	}

	.order-content {
		margin-top: 70rpx;

		// background-color: #FFFFFF;
		.my-top {
			margin: 0 25rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding-bottom: 25rpx;

			.head {
				display: flex;
				justify-content: space-between;
				line-height: 100rpx;
				margin: 0 4%;
				border-bottom: #F0F0F0 1rpx solid;
				color: #333333;
				font-size: 32rpx;
			}
		}

		.orderNavigation {
			font-size: 29rpx;
			position: relative;

			.widthsfzy {
				width: 25%;

				view {
					margin-top: 10rpx;
				}
			}

			.orderNavigation-dox {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 30rpx 0;
				margin-bottom: 14rpx;
				color: #686868;
				position: relative;
				font-size: 24rpx;
			}

			.orderNavigation-dox.service>view {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 30rpx 0;
				margin-bottom: 14rpx;
				color: #686868;
				position: relative;
				font-size: 24rpx;
			}

			.orderNavigation-dox image {
				width: 55rpx;
				height: 55rpx;
			}

			button.orderNavigation-dox {
				background-color: #FFFFFF;
				padding: 0;
				line-height: inherit;
			}

			button.orderNavigation-dox::after {
				content: none;
			}
		}
	}

	.cu-form {
		background-color: #FFFFFF;
		margin: 30rpx 25rpx 0;
		border-radius: 20rpx;

		image {
			width: 32rpx;
			height: 36rpx;
			margin-right: 20rpx;
		}

		.cu-form-group {
			margin: 0 30rpx;
			padding: 0;
		}
	}

	button:after {
		border: 0px;
	}
</style>
